
window.onload=function(){
	//得到canvas
	var mycanvas =document.querySelector("canvas");
	var ctx=mycanvas.getContext("2d");
	//按钮
	brush=document.querySelector(".brush");//画笔
	rects=document.querySelector(".rect");//矩形
	clear=document.querySelector(".clear");//清屏
	erase=document.querySelector(".erase");//橡皮檫
	retrue=document.querySelector(".retrue");//撤销
	save=document.querySelector(".save");//保存
	color=document.querySelector(".color");//颜色选择
	ranges=document.querySelector(".range");//粗细
	//初始化绘制大小颜色等
	var lineW=1,
	strokeC="#000000",
	fillC="#000000";
	//监听颜色修改与画笔大小修改
	//修改画笔大小
	ranges.onchange=function(){
		lineW=this.value;
	}
	//修改颜色
	color.onchange=function(){
		strokeC=this.value;
		fillC=this.value;
	}
	//画笔(实质改变颜色)
	brush.onclick=function(){
		strokeC=color.value;
	}
	//保存
	save.onclick = function() {
		let url = mycanvas.toDataURL('image/jpg');
		let a = document.createElement('a');//创建一个a标签
		document.body.appendChild(a);
		a.href = url;
		a.download = '草稿纸';//download 属性规定被下载的超链接目标。
		a.target = '_blank';
		a.click()
	};
	//定义判断鼠标是否按下事件
	var flag=false;
	
	//监听canva鼠标按下事件
	var startX=0,startY=0,endX=0,endY=0;
	mycanvas.onmousedown=function(e){
		//得到绘制开始的坐标
		startX=e.layerX;
		startY=e.layerY;
		//设置鼠标已经按下
		flag=true;
	}
	//监听鼠标按下移动
	mycanvas.onmousemove=function(e){
		if(flag){
			//得到移动的坐标
			endX=e.layerX;
			endY=e.layerY;
			//创建路径
			ctx.beginPath();
			//绘制图形
			ctx.moveTo(startX,startY);
			ctx.lineTo(endX,endY);
			//设置线条大小与颜色
			ctx.strokeStyle=strokeC;
			ctx.lineWidth=lineW;
			//设置线两端形状round-圆形线帽，square-正方形线帽。
			ctx.lineCap="round";
			ctx.stroke();
			//关闭路径
			ctx.closePath();
			
			//下一次的开始位置为上一次的结束坐标
			startX=endX;
			startY=endY;
		}
	}
	//监听鼠标松开
	mycanvas.onmouseup=function(){
		flag=false;
	}
	//离开当前区域
	mycanvas.onmouseleave=function(){
		flag=false;
	}
	//清空画布
	clear.onclick=function(){    
		ctx.clearRect(0,0,800,500);
	}
	//橡皮擦(实质改变颜色)
	erase.onclick=function(){	 
		strokeC="#ffffff";
	}

}